<template>
	<div class="contents">
		<h3 class="titleDot">计量单位</h3>
		<div class="prcontent">
			<ul class="labelul">
				<li v-for="(item, index) in unitList" :key="index" class="labelli" @mouseenter="enter(index)"
					@mouseleave="leave()">
					<div class="labelbtn">{{ item.name }}</div>
					<div v-show="seen1 && index == unit" class="label-dark">
						<vab-icon icon="edit-box-line" style="color: #03ac54;" title="编辑" @click="editunit(item)" />
						<vab-icon icon="delete-bin-line" style="padding-left: 10px; color: #03ac54;" title="删除"
							@click="unitDel(item)" />
					</div>
				</li>
				<li class="labelli">
					<div class="labelbtn xzbtn" @click="goodsunit = true">新增</div>
				</li>
			</ul>
		</div>
		<!-- 修改单位弹窗 -->
		<el-dialog title="修改单位" :visible.sync="goodsedit" width="520px" :close-on-click-modal="false">
			<el-input v-model="unitedit" maxlength="15" placeholder="长度不能超过15位" show-word-limit style="width: 300px;" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"/>
			<div slot="footer" class="dialog-footer">
				<el-button @click="goodsedit = false">取 消</el-button>
				<el-button type="primary" @click="uniteEdit">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 新增单位弹窗 -->
		<el-dialog title="新增单位" :visible.sync="goodsunit" width="520px" :close-on-click-modal="false">
			<el-input v-model="unitadd" maxlength="15" placeholder="长度不能超过15位" show-word-limit style="width: 300px;" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" />
			<div slot="footer" class="dialog-footer">
				<el-button @click="goodsunit = false">取 消</el-button>
				<el-button type="primary" @click="goodsunitAdd">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 删除计量单位提示 -->
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :close-on-click-modal="false"
		  >
		  <span>是否确认删除</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="detaleSedit">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 删除商品提示 -->
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisibleTwo"
		  width="30%"
		  :close-on-click-modal="false"
		  >
		  <span>是否确认删除</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisibleTwo = false">取 消</el-button>
		    <el-button type="primary" @click="detaleSeditTwo">确 定</el-button>
		  </span>
		</el-dialog>
		<h3 class="titleDot">商品标签</h3>
		<div class="prcontent">
			<ul class="labelul">
				<li v-for="(item, index) in tagList" :key="index" class="labelli" @mouseenter="enter(index, 'tag')"
					@mouseleave="leave('tag')">
					<div class="labelbtn">{{ item.name }}</div>
					<div v-show="seen2 && index == tag" class="label-dark">
						<vab-icon icon="edit-box-line" style="color: #03ac54;" title="编辑" @click="edittag(item)" />
						<vab-icon icon="delete-bin-line" style="padding-left: 10px; color: #03ac54;" title="删除"
							@click="tagDel(item)" />
					</div>
				</li>
				<li class="labelli">
					<div class="labelbtn xzbtn" @click="addtag('tag')">新增</div>
				</li>
			</ul>
		</div>
		<!-- 商品标签弹窗 -->
		<el-dialog title="新增标签" :visible.sync="goodstag" width="520px" :close-on-click-modal="false">
			<el-input v-model="tagadd" maxlength="5" placeholder="长度不能超过5位" show-word-limit style="width: 300px;" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"/>
			<div slot="footer" class="dialog-footer">
				<el-button @click="goodstag = false">取 消</el-button>
				<el-button type="primary" @click="goodstagAdd">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 修改标签弹窗 -->
		<el-dialog title="修改标签" :visible.sync="goodsEditTag" width="520px" :close-on-click-modal="false">
			<el-input v-model="tagedit" maxlength="15" placeholder="长度不能超过5位" show-word-limit style="width: 300px;" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"/>
			<div slot="footer" class="dialog-footer">
				<el-button @click="goodsEditTag = false">取 消</el-button>
				<el-button type="primary" @click="tagEdit">确 定</el-button>
			</div>
		</el-dialog>
		<h3 class="titleDot">包装方式</h3>
		<div class="prcontent">
			<ul class="labelul">
				<li v-for="(item, index) in optionPack" :key="index" class="labelli" @mouseenter="enter(index, 'pack')"
					@mouseleave="leave('pack')">
					<div class="labelbtn">{{ item.name }}</div>
					<div v-show="seen3 && index == packaging" class="label-dark">
						<vab-icon icon="edit-box-line" style="color: #03ac54;" title="编辑" @click="edittag(item)" />
						<vab-icon icon="delete-bin-line" style="padding-left: 10px; color: #03ac54;" title="删除"
							@click="tagDel(item)" />
					</div>
				</li>
				<li class="labelli">
					<div class="labelbtn xzbtn" @click="addtag('pack')">新增</div>
				</li>
			</ul>
		</div>
		<h3 class="titleDot">储存方式</h3>
		<div class="prcontent">
			<ul class="labelul">
				<li v-for="(item, index) in optionStorage" :key="index" class="labelli" @mouseenter="enter(index, 'storage')"
					@mouseleave="leave('storage')">
					<div class="labelbtn">{{ item.name }}</div>
					<div v-show="seen4 && index == storageing" class="label-dark">
						<vab-icon icon="edit-box-line" style="color: #03ac54;" title="编辑" @click="edittag(item)" />
						<vab-icon icon="delete-bin-line" style="padding-left: 10px; color: #03ac54;" title="删除"
							@click="tagDel(item)" />
					</div>
				</li>
				<li class="labelli">
					<div class="labelbtn xzbtn" @click="addtag('storage_means')">新增</div>
				</li>
			</ul>
		</div>
		<h3 class="titleDot">保质期单位</h3>
		<div class="prcontent">
			<ul class="labelul">
				<li v-for="(item, index) in optionShelf" :key="index" class="labelli" @mouseenter="enter(index, 'shelf')"
					@mouseleave="leave('shelf')">
					<div class="labelbtn">{{ item.name }}</div>
					<div v-show="seen5 && index == shelfing" class="label-dark">
						<vab-icon icon="edit-box-line" style="color: #03ac54;" title="编辑" @click="edittag(item)" />
						<vab-icon icon="delete-bin-line" style="padding-left: 10px; color: #03ac54;" title="删除"
							@click="tagDel(item)" />
					</div>
				</li>
				<li class="labelli">
					<div class="labelbtn xzbtn" @click="addtag('expiration_date_unit')">新增</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		getUnitQuery,
		getUnitEdit,
		getUnitAdd,
		getUnitDel,
		getTagQuery,
		getTagEdit,
		getTagAdd,
		getTagDel,
	} from '@/api/profile'
	import { getGoodsAdd, getGoodsToken, validation, getPack } from '@/api/goodslist'
	export default {
		data() {
			return {
				dict:'',
				unitadd: '', //单位新增
				unitedit: '', //单位修改
				detaParams:{},
				goodsunit: false,
				dialogVisible:false,
				dialogVisibleTwo:false,
				goodsedit: false,
				seen1: false,
				seen2: false,
				seen3: false,
				seen4: false,
				seen5:false,
				unit: 0,
				tag: 0,
				packaging:0,
				storageing:0,
				unitList: [],
				tagList: [],
				optionPack:[],
				optionStorage:[],
				optionShelf:[],
				selectItem: {},
				goodsEditTag: false,
				goodstag: false,
				tagadd: '', //标签新增
				tagedit: '', //标签修改
				tagItem: {},
			}
		},
		created() {
			this.Unitinit()
			this.Taginit()
			this.Pack()
			this.stor()
			this.shelf()
		},
		methods: {
			// 包装
			async Pack(){
				let res = await getPack({
					dict_code:'pack'
				})
				this.optionPack = res.data.records
			},
			//存储
			async stor() {
				let res = await getPack({
					dict_code:'storage_means'
				})
				this.optionStorage = res.data.records
			},
			//保质期单位
			async shelf() {
				let res = await getPack({
					dict_code:'expiration_date_unit'
				})
				this.optionShelf = res.data.records
			},
			//初始化
			async Unitinit() {
				const res = await getUnitQuery({
					code: 'unit',
				})
				this.unitList = res.data
			},
			async Taginit() {
				const res = await getTagQuery({
					code: 'tag',
				})
				this.tagList = res.data
			},
			enter(index, kind) {
				if (kind == 'tag') {
					this.seen2 = true
					this.tag = index
				} else if(kind == 'pack'){
					this.seen3 = true
					this.packaging = index
				} else if(kind == 'storage'){
					this.seen4 = true
					this.storageing = index
				}else if(kind == 'shelf'){
					this.seen5 = true
					this.shelfing = index
				}else {
					this.seen1 = true
					this.unit = index
				}
			},
			leave(kind) {
				if (kind == 'tag') {
					this.seen2 = false
					this.tag = null
				}else if(kind == 'pack'){
					this.seen3 = false
					this.packaging = 0
				}else if(kind == 'storage'){
					this.seen4 = false
					this.storageing = 0
				}else if(kind == 'shelf'){
					this.seen5 = false
					this.shelfing = 0
				}else {
					this.seen1 = false
					this.unit = null
				}
			},
			editunit(item) {
				this.goodsedit = true
				this.unitedit = item.name
				this.selectItem = item
			},
			//计量单位修改
			async uniteEdit() {
				const res = await getUnitEdit({
					name: this.unitedit,
					id: this.selectItem.id,
				})
				if (res.status == 200) {
					this.$message.success('修改成功')
					this.goodsedit = false
					await this.Unitinit()
				}else{
					this.$message.error(res.message)
				}
			},
			//计量单位新增
			async goodsunitAdd() {
				if (this.unitadd == '') {
					this.$message.error('请输入正确的计量单位')
					return false
				}
				const res = await getUnitAdd({
					name: this.unitadd,
					dict_code: 'unit',
				})
				if (res.status == 200) {
					this.goodsunit = false
					this.unitadd = ''
					this.$message.success('新增成功')
					await this.Unitinit()
				}else{
					this.$message.error(res.message)
				}
			},
			//计量单位删除
			unitDel(item) {
				this.dialogVisible = true
				this.detaParams = item
			},
			async detaleSedit() {
				const res = await getUnitDel({
					id: this.detaParams.id,
					value:this.detaParams.name
				})
				if (res.status == '200') {
					await this.Unitinit()
					this.dialogVisible = false
					this.$message.success(res.message)
				}else{
					this.$message(res.message)
				}
			},
			edittag(item) {
				this.goodsEditTag = true
				this.tagedit = item.name
				this.tagItem = item
			},
			//商品标签修改
			async tagEdit() {
				if(this.tagedit == ''){
					this.$message.error('请输入正确的商品标签')
					return false
				}
				const res = await getTagEdit({
					name: this.tagedit,
					id: this.tagItem.id,
				})
				if (res.status == '200') {
					this.$message.success('修改成功')
					this.goodsEditTag = false
					await this.Taginit()
					this.Pack()
					this.stor()
					this.shelf()
				}else{
					this.$message.error(res.message)
				}
			},
			addtag(e) {
				this.goodstag = true
				this.dict = e
			},
			//商品标签新增
			async goodstagAdd() {
				if (this.tagadd == '') {
					this.$message.error('请输入正确的商品标签')
					return false
				}
				const res = await getTagAdd({
					name: this.tagadd,
					dict_code: this.dict,
				})
				if (res.status == 200) {
					this.goodstag = false
					this.$message.success('新增成功')
					this.tagadd = ''
					this.Taginit()
					this.Pack()
					this.stor()
					this.shelf()
				}else{
					this.$message.error(res.message)
				}
			},
			//商品标签删除
			tagDel(item) {
				this.tagDelParams = item
				this.dialogVisibleTwo = true
			},
			async detaleSeditTwo() {
				const res = await getTagDel({
					id: this.tagDelParams.id,
					value:this.tagDelParams.name
				})
				if (res.status == '200') {
					this.Taginit()
					this.Pack()
					this.stor()
					this.shelf()
					this.dialogVisibleTwo = false
					this.$message.success(res.message)
				}else{
					this.$message.error(res.message)
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.contents {
		padding: 5px 15px 0;

		.titleDot {
			padding-left: 18px;
			position: relative;
			font-weight: 400;
		}

		.prcontent {
			padding-top: 10px;
			margin-top: 10px;
			word-wrap: break-word;
			word-break: normal;
			border-top: 1px solid #eee;
			clear: both;

			.labelul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				white-space: nowrap;

				.labelli {
					margin-right: 15px;
					margin-bottom: 10px;
					float: left;
					white-space: nowrap;
					position: relative;

					.labelbtn {
						min-width: 80px;
						line-height: 30px;
						height: 32px;
						padding: 0 25px;
						border: 1px solid #ccc;
						color: #bbb;
						text-align: center;
						cursor: pointer;
						border-radius: 2px;
					}

					.label-dark {
						background: rgba(0, 0, 0, 0.8);
						text-align: center;
						line-height: 32px;
						font-size: 12px;
						border-radius: 4px;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
					}

					.xzbtn {
						color: #fff;
						background-color: #03ac54;
					}
				}
			}
		}
	}

	.titleDot:after {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 2px;
		width: 6px;
		height: 6px;
		margin-top: -3px;
		border-radius: 4px;
		background: #03ac54;
	}

	.labelul:after {
		display: table;
		content: '';
		clear: both;
	}
</style>
